<template>
  <div class="shop">
    <el-form ref="filtrateForm" :inline="true" size="mini" :model="form" class="form">
      <div>
        <el-form-item label="类型:">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="全部" value = '0'></el-option>
            <el-option
              v-for="(item, index) in typeList"
              :key="item.id+''+index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="全部" value='0'></el-option>
            <el-option
              v-for="(item, index) in statusList"
              :key="item.id+''+index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item >
          <el-input class="input" v-model="form.username" placeholder="输入用户账号搜索" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-input class="input" v-model="form.shop_name" placeholder="输入小店名称搜索" clearable></el-input>
        </el-form-item>
        <el-button size="mini" type="primary" @click="searchVipOrder">搜索</el-button>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
      v-loading="listLoading"
    >
      <el-table-column fixed prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="用户账号"></el-table-column>
      <el-table-column prop="shop_name" label="加入会员店名称"></el-table-column>
      <!-- <el-table-column prop="charge_time" label="所属区域"></el-table-column> -->
      <el-table-column  label="会员价">
        <template slot-scope="scope">
          ¥ {{scope.row.actual_amount}}
        </template>
      </el-table-column>
      <el-table-column  label="返红包金额">
              <template slot-scope="scope">
          ¥ {{scope.row.rebate_money}}
        </template>
      </el-table-column>
      <el-table-column  label="类型">
         <template slot-scope="scope">
           <p v-if="scope.row.order_type == 30">新会员订单</p>
           <p v-if="scope.row.order_type == 31">续费会员订单</p>
         </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column prop="charge_no" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="getDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="pageChange"
        :current-page="form.page"
        :page-size="form.size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <jdialog
      title="会员费详情"
      :visible.sync="showModal"
      width="800px"
    >
        <DetailInfo :visible="showModal"
        :currentId="orderId"
        @close="showModal = false"
        @showSkuInfoDetail="certainshowInfordetail"></DetailInfo>
    </jdialog>
  </div>
</template>

<script>
import DetailInfo from "./detailInfo";
import {orderJoinshopViplist} from '@/api/shopdetail'
export default {
  components: {
    DetailInfo
  },
  data() {
    return {
      detail: {},
      showModal: false,
      form: {
        type: "0",
        status: "0",
        username: '',
        shop_name:'',
        page: 1,
        size: 20
      },
      total: 0,
      listLoading: false,
      orderId:'',
      tableData: [],
      typeList: [{ id: 1, name: "新会员" }, { id: 2, name: "续费会员" }],
      statusList: [
        { id: 1, name: "使用中" },
        { id: 2, name: "过期失效" },
        { id: 3, name: "退费失效" }
      ]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    pageChange(page) {
      this.form.page = page;
      this.getList();
    },
    // handleSizeChange(val) {
    //   this.form.size = val;
    //   this.pageChange(1);
    // },
    searchVipOrder(){
      this.form.page = 1;
      this.getList()
    },
    certainshowInfordetail(){
      this.showModal =false
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    getDetail (id) {
      this.showModal = true
      this.orderId = id
    },
    async getList() {
      // const form = this.form;
      this.listLoading = true;
      var url = 'username='+this.form.username+
                '&page='+this.form.page+
                '&size='+this.form.size+
                '&shop_name='+this.form.shop_name+
                '&type='+this.form.type+
                '&status='+this.form.status
      let res  = await orderJoinshopViplist(url)
      if(res.code === 10000){
        this.listLoading = false
        this.tableData = res.data.data
        this.total = res.data.total
      }else{
        this.listLoading = false
        this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .form {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    float: right;
    margin-top: 30px;
  }
}
</style>